<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
      *{
          margin:0;
          padding:0;
          box-sizing: border-box;
      }
      body{
          width: 100vw;
          height: 100vh;
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
      }
      .caidan{
          height: 100px;
          width: 100vw;
          display: flex;
          border-bottom:3px solid #ccc;
          justify-content: space-around;
          align-items: center;
      }
      #canvas{
          flex:1;
          width: 100vw;
      }
      .btn,.btn2{
          width: 150px;
          height: 50px;
          border:1px solid #ccc;
          border-radius: 20px;
          text-align: center;
          line-height: 50px;
          cursor: pointer;
      }
      .btn1{
        width: 150px;
          height: 50px;
          border:1px solid #ccc;
          border-radius: 20px;
          text-align: center;
          line-height: 50px;
          cursor: pointer;
      }
     .active{
          box-shadow:0 0 20px deepskyblue;
          background:lightskyblue;
      }
      .line{
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .xi:after{
        content:"";
        background-color: #333;
        width: 6px;
        height: 6px;
        display: block;
        border-radius: 3px;
      }
      .normal:after{
        content:"";
        background-color: #333;
        width: 16px;
        height: 16px;
        display: block;
        border-radius: 8px;
      }
      .cu:after{
        content:"";
        background-color: #333;
        width: 32px;
        height: 32px;
        display: block;
        border-radius: 16px;
      }

  </style>
  <body>
    <div class="caidan">
        <div class="btn" id="huabi">画笔</div>
        <div class="btn" id="rect">矩形</div>
        <div class="btn">圆形</div>
        <div class="btn">橡皮擦</div>
        <div class="btn2 download">下载图片</div>
        <div class="btn1 line xi"></div>
        <div class="btn1 line normal"></div>
        <div class="btn1 line cu"></div>
        <div class="btn2">
          <input type="color" id="color">
        </div>
    </div>
    <canvas id="canvas">
    </canvas>
  </body>
  <script>
    //1.找到画布对象
    var canvas = document.querySelector("#canvas");
    var ctx=canvas.getContext("2d")
    var allBtn=document.querySelectorAll(".btn")
    //设置canvas的宽度和高度
    canvas.setAttribute("width",canvas.offsetWidth);
    canvas.setAttribute("height",canvas.offsetHeight);

    var huaban={
        type:"none",
        isDraw:false,
        beginX:0,
        beginY:0,
        lineWidth:6,
        color:"#000",
        imageData:null,
        //画笔函数
        huabiFn:function(e){
          var x=e.pageX-canvas.offsetLeft;
          var y=e.pageY-canvas.offsetTop
          ctx.lineTo(x,y)
          ctx.strokeStyle=huaban.color
          ctx.lineWidth=huaban.lineWidth
          ctx.lineCap="round"
          ctx.lineJoin="round"
          ctx.stroke()
        },
        //矩形函数c 
        rectFn:function(e){
          var x=e.pageX-canvas.offsetLeft;
          var y=e.pageY-canvas.offsetTop
          ctx.clearRect(0,0,canvas.offsetWidth,canvas.offsetHeight)
          if(huaban.imageData!=null){
            ctx.putImageData(huaban.imageData,0,0,0,0,canvas.offsetWidth,canvas.offsetHeight)
          }   
          ctx.beginPath()
          ctx.rect(huaban.beginX,huaban.beginY,x-huaban.beginX,y-huaban.beginY)
          ctx.stroke()
          ctx.closePath()
        }
    }

    var huabiBtn=document.querySelector("#huabi");
    var rectBtn=document.querySelector("#rect");
    //绘制线段按钮
    huabiBtn.onclick=function(){
       huaban.type="huabi"
       console.log(huaban);
        allBtn.forEach((item,index)=>{
          item.classList.remove("active")
        })
        huabiBtn.classList.add("active") 
    }
    //绘制矩形按钮
    rectBtn.onclick=function(){
      huaban.type="rect"
      console.log(huaban);
      allBtn.forEach((item,index)=>{
          item.classList.remove("active")
        })
      rectBtn.classList.add("active")
        
    }
    //设置粗细的按钮
    var lineDivs=document.querySelectorAll(".line")
    lineDivs.forEach((item,i)=>{
      item.onclick=function(){
        lineDivs.forEach(item=>{
          item.classList.remove("active")
        })
        item.classList.add("active")
        if(i==0){
          huaban.lineWidth=6
        }else if(i==1){
          huaban.lineWidth=16
        }else{
          huaban.lineWidth=32
        }
      }
    })

    //监听颜色改变事件
    var colorInput=document.querySelector("#color")
    colorInput.onchange=function(e){
      huaban.color=colorInput.value
    }
    //下载按钮
    var downloadBtn=document.querySelector(".download")
    downloadBtn.onclick=function(){
      var url=canvas.toDataURL()
      console.log(url);
    }
    //监听鼠标按下事件
    canvas.onmousedown=function(e){
       if(huaban.type!="none"){
        huaban.isDraw=true
       }
       if(huaban.type=="rect"){
         var x=e.pageX-canvas.offsetLeft;
         var y=e.pageY-canvas.offsetTop
         huaban.beginX=x;
         huaban.beginY=y;
       }
       if(huaban.type=="huabi"){
         var x=e.pageX-canvas.offsetLeft;
         var y=e.pageY-canvas.offsetTop
         huaban.beginX=x;
         huaban.beginY=y;
         ctx.beginPath()
         ctx.moveTo(x,y)
       }
    }
    //监听鼠标抬起事件
    canvas.onmouseup=function(){
       huaban.imageData=ctx.getImageData(0,0,canvas.offsetWidth,canvas.offsetHeight)
       huaban.isDraw=false
       if(huaban.type=="huabi"){
         ctx.closePath()
       }
    }

    canvas.onmousemove=function(e){
        if(huaban.isDraw){
          console.log(huaban);
          var strFn=huaban.type+'Fn'
          huaban[strFn](e)
        }
    }
    console.log(huaban);
  </script>
</html>
